<template>
	<view class="">
		<view class="top-con row">
			<view class="top-btn" hover-class="hover-opacity" @tap="canshowType(0)">报名团长</view>
			<view class="top-btn" hover-class="hover-opacity" @tap="canshowType(1)">异业报名</view>
		</view>
		<view class="line" style="height: 100upx;"></view>
		<view class="" style="padding: 30upx;">
			<jyf-parser :html="detail"></jyf-parser>
		</view>
		<u-popup v-model="show" mode="center" :overlayStyle="overlayStyle" bgColor="transparent">
			<view class="u-p-con" style="position: relative;">
				<view class="p-con">
					<view class="p-con-title" v-if="ufrom.type == 0">欢迎您为我们公司申请我们公司的团长招募我们稍后将会有专人跟您联系，请您填写以下信息！</view>
					<view class="p-con-title" v-else>欢迎您为我们公司提供异业信息，待何时成单后我们会安排专人与您联系并且您会获得丰富的奖励！请您填写以下信息。</view>
					<view class="p-from">
						<view class="row" style="flex-wrap:wrap;padding-left:18upx;" v-if="ufrom.type == 1">
							<view class="p-item-i" v-for="(item, index) in dataList" :key="index" :class="{ active: item.checked }" @tap="checkItem(item, index)">
								{{ item.name }}
							</view>
						</view>

						<view class="row between p-item b-b">
							<view class="p-item-title">姓名</view>
							<input class="p-item-input" placeholder="请输入" v-model="ufrom.name" confirm-type="next" />
						</view>
						<view class="row between p-item b-b">
							<view class="p-item-title">联系方式</view>
							<input class="p-item-input" type="number" maxlength="11" v-model="ufrom.phone" placeholder="请输入" confirm-type="next" />
						</view>
						<view class="row between p-item b-b">
							<view class="p-item-title">地址</view>
							<input class="p-item-input" v-model="ufrom.address" placeholder="请具体到小区" confirm-type="next" />
						</view>
						<view class="row between p-item b-b" v-if="ufrom.type == 1 && showInput">
							<view class="p-item-title">从业类型</view>
							<input class="p-item-input" placeholder="请输入" v-model="ufrom.job" confirm-type="done" />
						</view>
					</view>
					<view class="f-btn" hover-class="hover-opacity" @tap="userConfirm">提交</view>
				</view>
				<view class="p-b column">
					<view class="p-line"></view>
					<view class="" style="margin-top: -4upx;" @tap="show = false"><u-icon name="close-circle" size="60" color="#ffffff"></u-icon></view>
				</view>
			</view>
		</u-popup>
		<u-modal v-model="showtips" :show-cancel-button="false" :show-title="false" borderRadius="20" confirm-color="#333" @confirm="back">
			<view class="slot-content center"><rich-text :nodes="content"></rich-text></view>
		</u-modal>
		<mix-loading v-if="isLoading"></mix-loading>
	</view>
</template>

<script>
import { checkStr } from '@/common/js/util';
import jyfParser from '@/components/jyf-parser/jyf-parser.vue';
export default {
	components:{
		jyfParser
	},
	data() {
		return {
			ufrom: {
				type: 0,
				name: '',
				phone: '',
				address: '',
				lng: '',
				lat: '',
				job: ''
			},
			overlayStyle:{
				background:"rgba(0,0,0,.6)"
			},
			show: false,
			showInput: false,
			showtips: false,
			content: '恭喜您已报名成功!<br>请静待工作人员联系您!',
			detail:"",
			activeIndex: '',
			dataList: [
				{ name: '装修信息', checked: false },
				{ name: '保姆信息', checked: false },
				{ name: '月嫂信息', checked: false },
				{ name: '育儿嫂信息', checked: false },
				{ name: '保姆从业者信息', checked: false },
				{ name: '保育儿嫂从业者信息', checked: false },
				{ name: '其他', checked: false }
			]
		};
	},
	onLoad() {
		this.getContent();
	},
	methods: {
		async getContent() {
			const res = await this.$request('content/rich-text', { type: 0},{showLoading:true});
			if (res.result == 0) {
				this.detail = res.data.detail;
			} else {
				this.$uti.msg(res.resultNote);
			}
		},
		canshowType(type) {
			this.ufrom.type = type;
			this.show = true;
		},
		checkItem(v, k) {
			v.checked = true;
			this.activeIndex = k;
			k == this.dataList.length - 1 ? (this.showInput = true) : (this.showInput = false);
			this.dataList.forEach((el, index) => {
				if (index != k) {
					el.checked = false;
				}
			});
		},
		userConfirm() {
			const { name, phone, address } = this.ufrom;
			let type = this.ufrom.type;
			if (name == '') {
				this.$util.msg('请输入您的姓名!');
				return;
			}
			if (phone == '') {
				this.$util.msg('请输入您的手机号!');
				return;
			}
			if (!checkStr(phone, 'mobile')) {
				this.$util.msg('手机号格式错误!');
				return;
			}
			if (address == '') {
				this.$util.msg('请输入您的地址!');
				return;
			}
			if ((this.activeIndex == '' && type == 1) || (type == 1 && this.activeIndex == this.dataList.length - 1 && this.ufrom.job == '')) {
				this.$util.msg('请输入从业类型!');
				return;
			}
			this.$util.throttle(async () => {
				if (type == 0) {
					type = '';
				} else {
					(type === this.activeIndex) == this.dataList.length - 1 ? this.ufrom.job : this.dataList[this.activeIndex].name;
				}
				const data = {
					uid: uni.getStorageSync('uid'),
					name: this.ufrom.name,
					phone: this.ufrom.phone,
					address: this.ufrom.address,
					type
				};
				const res = await this.$request('user/tz-apply', this.ufrom, { showLoading: true });
				if (res.result == 0) {
					this.show = false;
					this.showtips = true;
				} else {
					this.$util.msg(res.resultNote);
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
.slot-content {
	padding: 70upx 30upx;
	font-size: 30upx;
	color: #333333;
	line-height: 43upx;
}
.top-con {
	position: fixed;
	height: 100upx;
	width: 100%;
	padding: 0 30upx;
	background: #ffffff;
}
.top-btn {
	width: 214upx;
	height: 70upx;
	background: #2781a7;
	margin-right: 20upx;
	border-radius: 14upx;
	color: #ffffff;
	font-size: 26upx;
	text-align: center;
	line-height: 70upx;
}
.u-p-con {
	padding-bottom: 120upx;
	// background:rgba(0,0,0,.6);
}
.p-con {
	width: 680upx;
	background: #ffffff;
	border-radius: 30upx;
	padding: 50upx;
}
.p-con-title {
	font-size: 28upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #999999;
	line-height: 39upx;
}
.p-from {
	padding: 40upx 0;
}
.p-item {
	line-height: 70upx;
	height: 70upx;
}
.p-item-i {
	padding: 8upx 30upx;
	border: 1upx solid rgba(39, 129, 167, 0.5);
	border-radius: 25upx;
	font-size: 24upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: rgba(39, 129, 167, 0.5);
	margin: 0 24upx 24upx 0;
}
.p-item-i:nth-child(3) {
	margin-right: 0;
}
.active {
	background: rgba(39, 129, 167, 1);
	color: #ffffff !important;
}
.p-item-title {
	font-size: 28upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #333333;
	line-height: 70upx;
}
.p-item-input {
	line-height: 70upx;
	height: 70upx;
	flex: 1;
	text-align: right;
}
.p-b {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 60upx;
	height: 120upx;
	// transition: all 0.25s linear;
}
.p-line {
	width: 2px;
	height: 60upx;
	background: #ffffff;
}
.f-btn {
	height: 88upx;
	text-align: center;
	line-height: 88upx;
	background: #2781a7;
	border-radius: 44upx;
	font-size: 30upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #ffffff;
}
</style>
